// out: ../css/
// 导入初始化样式
@import 'base.less';
@mainColor: #fb7299;
@ratio: 3.75vw;
// 头部
header {
    width: 100%;
    height: (44/@ratio);
    padding: 0 (15/@ratio);
    display: flex;
    justify-content: space-between;
    .logo {
        width: 100%;
        height: (44/@ratio);
        display: flex;
        align-items: center;
        justify-content: space-between;
        i {
            color: @mainColor;
            font-size: (25/@ratio);
            line-height: (28/@ratio);
        }
        .right {
            width: (166/@ratio);
            height: (24/@ratio);
            display: flex;
            align-items: center;
            justify-content: space-between;
            a {
                font-size: (22/@ratio);
                color: #ccc;
                line-height: (22/@ratio);
            }
            .login {
                width: (24/@ratio);
                height: (24/@ratio);
            }
            .download {
                width: (72/@ratio);
                height: (24/@ratio);
                margin-left: (15/@ratio);
            }
        }
    }
}

// 导航
.nav {
    width: 100%;
    height: (38/@ratio);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    ul {
        width: (335/@ratio);
        height: 100%;
        display: flex;
        margin-left: (15/@ratio); // flex: 1;
        // background-color: #ccc;
        justify-content: space-between;
        li {
            display: flex;
            align-items: center;
            width: (28/@ratio);
            height: (38/@ratio);
            font-size: (14/@ratio);
            line-height: (14/@ratio);
            a {
                width: (28/@ratio);
                height: (38/@ratio);
                line-height: (38/@ratio);
            }
            .border {
                border-bottom: 2px solid @mainColor;
            }
        }
    }
    div {
        width: (40/@ratio);
        height: (40/@ratio);
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
            font-size: (20/@ratio);
            color: #ccc;
            line-height: (20/@ratio);
        }
    }
}

// 内容
main {
    width: 100%;
    padding: 0 (15/@ratio);
    display: flex;
    justify-content: space-between;
    ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: (10/@ratio);
        li {
            width: (173/@ratio);
            height: (97/@ratio);
            position: relative;
            display: block;
            margin-right: (5/@ratio);
            margin-bottom: (50/@ratio);
            span {
                font-size: (12/@ratio);
                text-overflow: ellipsis;
                margin-top: (5/@ratio);
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            img {
                width: (163/@ratio);
                height: (97/@ratio);
            }
            .count {
                position: absolute;
                display: flex;
                justify-content: space-between;
                width: (173/@ratio);
                height: (35/@ratio);
                bottom: (-8/@ratio);
                padding: 0 (10/@ratio);
                .icon_shipin_bofangshu {
                    font-size: (12/@ratio);
                    color: #fff;
                    margin-right: (5/@ratio);
                }
                .icon_shipin_danmushu {
                    font-size: (12/@ratio);
                    color: #fff;
                }
            }
        }
    }
}

// 底部
footer {
    position: relative;
    width: (351/@ratio);
    height: (36/@ratio);
    border-radius: (10/@ratio);
    display: flex;
    justify-content: center;
    div {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: @mainColor;
        bottom: (40/@ratio);
        border-radius: (18/@ratio);
        i {
            font-size: (14/@ratio);
            color: #fff;
            z-index: 2;
        }
        span {
            font-size: (14/@ratio);
            line-height: (14/@ratio);
            text-align: center;
            color: #fff;
        }
    }
}